<template>
	<view class="container">
		<cu-custom bgColor="bg-none">
			<block slot="content"></block>
		</cu-custom>
		<view class="containerBox">
			<view class="personHead" @click="navTo('/pages/my/mydetail')">
				<view class="HeadLeft">
					<image :src="userInfo.avatar?userInfo.avatar:'../../static/errorImage.png'" mode=""></image>
					<view class="flex flex-direction margin-left">
						<view class="name">
							{{userInfo.nickName||'-'}}
						</view>
						<view class="phone margin-top-xs">
							{{userInfo.phoneNumber||'-'}}
						</view>	
					</view>
				</view>	
				<view class="cuIcon-right"></view>
			</view>	
			<!--  -->
			<view class="personBox flex flex-wrap">
				<view class="boxItem">
					<image src="../../static/my_shop.png" mode=""></image>
					<view class="text">订单</view>	
				</view>
				<view class="boxItem" @click="navTo('/pages/my/qdhistory')">
					<image src="../../static/my_history.png" mode=""></image>
					<view class="text">签到历史</view>	
				</view>
				<view class="boxItem" @click="navTo('/pages/nameList/nameList')">
					<image src="../../static/my_list.png" mode=""></image>
					<view class="text">名单库</view>	
				</view>
				<view class="boxItem">
					<image src="../../static/my_service.png" mode=""></image>
					<view class="text">客服</view>	
				</view>
				<view class="boxItem">
					<image src="../../static/my_setting.png" mode=""></image>
					<view class="text">设置</view>	
				</view>
				<view class="boxItem">
					<image src="../../static/my_video.png" mode=""></image>
					<view class="text">教程</view>	
				</view>
			</view>
			<!--  -->
			<view class="secTit">服务</view>	
			<view>
				<image src="../../static/ad.png" style="width: 100%;" mode="widthFix"></image>
			</view>	
		</view>	

		<cu-bar :current="3"></cu-bar>
	</view>
</template>
<script>
	import share from '@/components/share.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			share
		},
		data() {
			return {
			}
		},
		onLoad() {
			// this.getUserInfo()1
		},		
		onShow() {
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>
<style lang='scss'>
.containerBox{
	padding: 32upx;
}
.personHead{
	width: 100%;
	height: 172upx;
	background: #FFFFFF;
	border-radius: 40upx;
	padding: 26upx 48upx 26upx 32upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.HeadLeft{
		width: 70%;
		display: flex;
		align-items: center;
		image{
			width: 120upx;
			height: 120upx;
		}
		.name{
			font-size: 48upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.phone{
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}
}
.personBox{
	width: 100%;
	height: 296upx;
	background: #FFFFFF;
	border-radius: 40upx;
	margin-top: 32upx;
	padding: 32upx 0;
	.boxItem{
		width: 33.3%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20upx;
		image{
			width: 48upx;
			height: 48upx;
		}
		.text{
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top:8upx ;
		}
	}
}
.secTit{
	font-size: 28upx;
	margin: 32upx 0;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
}
</style>
